<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <component
      v-for="widget in componentList"
      :key="widget.widgetName"
      v-bind:is="widget.widgetName"
      v-bind="widget"
    ></component>
  </div>
</template>

<script>
import { componentList as configList } from '@/config';

// 调整config结构
const componentList = configList.map(widget => {
  const widgetName = Object.keys(widget)[0]
  return Object.assign(widget[widgetName], {
    widgetName
  })
});

// 动态注册组件
const components = {};
componentList.forEach(widget => {
  const widgetName = widget.widgetName
  components[widgetName] = () => import(`@/views/${widgetName}.vue`)
});

export default {
  name: 'Home',
  components,
  data() {
    return {
      componentList,
    };
  },
};
</script>
